<template>
  <el-container>
    <!-- 页面上方1个输入框+3个按钮-->
    <el-header>
      <el-row>
        <!-- 响应式布局（24个栅格），随着浏览器窗口的变化，自动缩放-->
        <!-- 查询药品输入框-->
        <el-col :xs="12" :sm="6" :md="6" :lg="6" :xl="6">
          <el-input v-model="name" placeholder="请输入药品助记码">
          </el-input>
        </el-col>
        <!-- 查询药品按钮-->
        <el-col :xs="12" :sm="4" :md="4" :lg="3" :xl="3">
          <el-button type="primary" class="el-icon-view" @click="queryDrugs()"> 查询药品 </el-button>
        </el-col>
        <!-- 新增药品按钮-->
        <el-col :xs="12" :sm="10" :md="10" :lg="12" :xl="12">
          <el-button type="primary" class="el-icon-edit" @click="toAddNewDrug()"> 新增药品 </el-button>
        </el-col>
        <!-- 新增药品窗口dialogVisible为true,对话框显示，false，对话框隐藏，初始值为false-->
        <el-dialog :visible.sync="dialogVisible">
          <span>{{ windowname }}</span>
          <el-form :model="addDrugsForm" label-width="80px">
            <el-form-item label="药品编码">
              <!-- 双向绑定，addDrugsForm中的属性-->
              <el-input v-model="addDrugsForm.drugsCode"></el-input>
            </el-form-item>
            <el-form-item label="药品名称">
              <el-input v-model="addDrugsForm.drugsName"></el-input>
            </el-form-item>
            <el-form-item label="药品助记码">
              <el-input v-model="addDrugsForm.mnemonicCode"></el-input>
            </el-form-item>
            <el-form-item label="药品规格">
              <el-input v-model="addDrugsForm.drugsFormat"></el-input>
            </el-form-item>
            <el-form-item label="药品单位">
              <el-input v-model="addDrugsForm.drugsUnit"></el-input>
            </el-form-item>
            <el-form-item label="药品单价">
              <el-input v-model="addDrugsForm.drugsPrice"></el-input>
            </el-form-item>
            <!-- 下拉列表1，由el-form-item包含~-->
            <el-form-item label="药品剂型">
              <!-- <span>药品剂型</span> -->
              <el-select v-model="value" :placeholder="drugsDosage">
                <el-option v-for="item in drugsDosageslist" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <!-- 下拉列表2-->
            <el-form-item label="药品剂型">
              <!-- <span>药品类型</span> -->
              <el-select v-model="value1" :placeholder="drugsType">
                <el-option v-for="item in drugsTypeslist" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <!-- 确定以及取消按钮-->
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="addNewDrug()">确 定</el-button>
          </span>
        </el-dialog>
        <!-- </el-col :span='12'> -->
        <!-- 导入药品按钮-->
        <el-col :xs="12" :sm="6" :md="3" :lg="3" :xl="3">
          <el-button type="primary" class="el-icon-sold-out"> 导入药品 </el-button>
        </el-col>
      </el-row>
    </el-header>
    <!-- 主页面药品列表-->
    <div class="drugsShow">
      <el-table :data="drugsMsg.slice((currentPage-1)*pagesize,currentPage*pagesize)" style="width: 100%">
        <el-table-column prop="drugsCode" label="药品编码" width="180"></el-table-column>
        <el-table-column prop="drugsName" label="药品名称" width="180"></el-table-column>
        <el-table-column prop="drugsFormat" label="药品规格" width="180"></el-table-column>
        <el-table-column prop="drugsUnit" label="药品单位" width="180"></el-table-column>
        <el-table-column prop="drugsPrice" label="药品单价" width="180"></el-table-column>
        <el-table-column prop="drugsDosage.constantName" label="药品剂型" width="180"></el-table-column>
        <el-table-column prop="drugsType.constantName" label="药品类型"></el-table-column>
        <!-- 到element ui官网找到相应的样式，复制修改代码-->
        <!-- 主页面中药品的编辑（update）及删除-->
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="updateDrugsClick(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" @click="delDrugsClick(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页模块-->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-sizes="[5, 10, 20, 40]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="drugsMsg.length">
      </el-pagination>
    </div>
  </el-container>
</template>

<script>
  //引入ajax工具类中的函数postRequest
  import {
    postRequest
  } from '../../utils/ajaxapi'
  import {
    getRequest
  } from '../../utils/ajaxapi'
  export default {

    mounted: function() {
      this.queryAll();
      this.query_xiala_list();
    },

    data() {
      return {
        //搜索框输入
        name: '',
        //弹窗可视化变量Boolean
        dialogVisible: false,
        //弹窗名称
        windowname: '新增药品',
        //主页面显示的药品信息数组
        drugsMsg: [],
        //主页面信息分页
        currentPage: 1,
        //主页面信息分页显示条目
        pagesize: 20,
        //增加药品时输入的信息
        addDrugsForm: {
          id: '',
          drugsCode: '',
          drugsName: '',
          drugsFormat: '',
          drugsUnit: '',
          drugsPrice: '',
          mnemonicCode: '',
          drugsDosageId: '',
          drugsTypeId: '',
          //如果从后台返回的是Map<key,value>形式的值，那么下边这里就不用定义对象中的对象了，直接用变量接受（跟后台返回的变量名称一致），用Map更好~
          drugsDosage: {
            id: '',
            constantName: '',
            constantCode: ''
          },
          drugsType: {
            id: '',
            constantName: ''
          },
        },
        //下拉框1的值的数组，也可以写成drugsDosageslist: [{id:'',constantName:'',.....}]与后台发送的数据一一对应的形式，就不用遍历，直接接收
        //下拉列表选中的值，可以直接绑定到addDrugsForm.drugsDosage.id上，而不用定义value变量，即在template里：v-model="addDrugsForm.drugsDosage.id"
        //:key="item.ID" :label="item.constantName" :value="item.ID"
        drugsDosageslist: [],
        //下拉框当前的值1
        value: '',
        //下拉框2的值的数组
        drugsTypeslist: [],
        //下拉框当前的值2
        value1: '',
        //两个下拉框的默认值
        drugsDosage: '请选择',
        drugsType: '请选择'
      }
    },

    methods: {
      //查询所有药品
      queryAll() {
        let _this = this;
        this.$axios.get("/neupha/drugs/queryAllDrugs")
          .then(response => {
            console.log(response.data);
            _this.drugsMsg = response.data;
          })
      },
      //查询下拉列表内容
      query_xiala_list() {
        let _this = this;
        getRequest("/neupha/drugs/toAddDrugs")
          .then(function(response) {
            console.log(response.data);
            console.log(response.data.drugsDosages[0].constantName);
            for (let i = 0; i < response.data.drugsDosages.length; i++) {
              _this.drugsDosageslist[i] = {
                value: response.data.drugsDosages[i].id,
                label: response.data.drugsDosages[i].constantName + '   ' + response.data.drugsDosages[i].constantCode
              };
              console.log(_this.drugsDosageslist[i]);
            };
            for (let i = 0; i < response.data.drugsTypes.length; i++) {
              _this.drugsTypeslist[i] = {
                value: response.data.drugsTypes[i].id,
                label: response.data.drugsTypes[i].constantName
              };
            }
          })
      },
      //查询药品
      queryDrugs() {
        let _this = this;
        console.log(this.name);
        this.$axios.get("/neupha/drugs/queryDrugs", {
            params: {
              name: this.name
            }
          })
          .then(response => {
            console.log(response.data);
            _this.drugsMsg = response.data;
          })
      },
      //增加按钮调用函数
      toAddNewDrug() {
        this.dialogVisible = true;
      },
      //增加药品提交,或者更新药品提交
      addNewDrug() {
        console.log(this.value);
        console.log(this.value1);
        let _this = this;
        alert(this.addDrugsForm);
        //根据弹窗的名称，判断是增加药品还是更新药品
        if (this.windowname == '新增药品') {
          console.log('增加');
          //把数据存入addDrugsForm对象，发送
          this.addDrugsForm.drugsDosageId = this.value;
          this.addDrugsForm.drugsTypeId = this.value1;
          console.log(this.addDrugsForm.drugsDosageId);
          console.log(this.addDrugsForm.drugsTypeId = this.value1);
          postRequest("/neupha/drugs/addDrugs", this.addDrugsForm)
            .then(function(response) {
              alert(_this.addDrugsForm.drugsName);
              //获取返回值并复制，返回值改变，组件绑定的内容也随之改变
              //_this.addDrugsForm.drugsName = response.data.drugsName;
            })
        } else {
          console.log('更新');
          this.addDrugsForm.drugsDosageId = this.value;
          this.addDrugsForm.drugsTypeId = this.value1;
          postRequest("/neupha/drugs/updateDrugs", this.addDrugsForm)
            .then(function(response) {
              alert(_this.addDrugsForm.drugsName);
            })
        }
      },
      //分页功能
      handleSizeChange: function(size) {
        this.pagesize = size;
        console.log(this.pagesize) //每页下拉显示数据
      },
      handleCurrentChange: function(currentPage) {
        this.currentPage = currentPage;
        console.log(this.currentPage) //点击第几页
      },
      //编辑按钮调用函数
      updateDrugsClick(index, row) {
        let _this = this;
        console.log(index); //index编号
        console.log(row); //row内容
        this.windowname = '更新药品';
        this.dialogVisible = true;
        //把当前行的药品信息在弹窗中显示
        this.addDrugsForm = row;
        this.drugsType = this.addDrugsForm.drugsType.constantName;
        this.drugsDosage = this.addDrugsForm.drugsDosage.constantName;
      },
      //删除按钮调用函数
      delDrugsClick(index, row) {
        console.log(row.id);
        console.log(index);
        let id = row.id;
        console.log(id);
        /*        getRequest("/neupha/drugs/delDrugs", this.row.id)
                .then(function(response){
                }) */
        this.$axios.get("/neupha/drugs/delDrugs", {
            params: {
              id: id
            }
          })
          .then(response => {})
      }
    }
  }
</script>
